<!--
 * @Author: Songjq
 * @Date: 2022-01-18 17:49:02
 * @Desscription: 
-->
<template>
  <div class="login">
    <el-form
      ref="loginForm"
      :model="loginForm"
      :rules="loginRules"
      label-position="left"
      label-width="0px"
      class="login-form"
      style="width:560px"
    >
      <el-steps
        :active="active"
        finish-status="success"
        simple
        class="ui-mgb-10 ui-mgt-10"
      >
        <el-step title="填写邮箱"></el-step>
        <el-step title="修改密码"></el-step>
        <el-step title="找回成功"></el-step>
      </el-steps>

      <el-form-item
        prop="email"
        v-if="active != 3"
      >
        <el-input
          autocomplete="new-password"
          v-model="loginForm.email"
          type="text"
          prefix-icon="el-icon-message"
          placeholder="账户邮箱"
          size="medium"
          :readonly="active == 2"
        ></el-input>
      </el-form-item>
      <el-form-item
        prop="password"
        v-if="active == 2"
      >
        <el-input
          autocomplete="new-password"
          v-model="loginForm.password"
          :type="showPassword?'text':'password'"
          prefix-icon="el-icon-lock"
          placeholder="新密码"
          @keyup.enter.native="stepTwo"
        ><i
            slot="suffix"
            class="el-input__icon el-icon-view ui-cous"
            @click="showPassword = !showPassword"
          ></i></el-input>
      </el-form-item>
      <el-form-item
        prop="checkPass"
        v-if="active == 2"
      >
        <el-input
          autocomplete="new-password"
          v-model="loginForm.checkPass"
          :type="showCheckPass?'text':'password'"
          prefix-icon="el-icon-user"
          placeholder="确认新密码"
          size="medium"
        ><i
            slot="suffix"
            class="el-input__icon el-icon-view ui-cous"
            @click="showCheckPass = !showCheckPass"
          ></i></el-input>
      </el-form-item>
      <el-form-item
        prop="emailCode"
        v-if="active == 2"
      >
        <div class="ui-flex">
          <el-input
            v-model="loginForm.emailCode"
            placeholder="进入邮箱查看"
            class="ui-flex-1"
            size="medium"
          >
            <svg-icon
              slot="prefix"
              icon-class="validCode"
              class="el-input__icon input-icon ui-mgl-6"
            />
          </el-input>
        </div>
      </el-form-item>
      <el-form-item
        prop="code"
        v-if="active != 3"
      >
        <div class="ui-flex">
          <el-input
            v-model="loginForm.code"
            placeholder="验证码"
            @keyup.enter.native="nextFn"
            class="ui-flex-1"
            size="medium"
          >
            <svg-icon
              slot="prefix"
              icon-class="validCode"
              class="el-input__icon input-icon ui-mgl-6"
            />
          </el-input>
          <div class="login-code">
            <img
              :src="codeUrl"
              @click="getCode"
            >
          </div>
        </div>
      </el-form-item>

      <div
        class="success-box"
        v-if="active == 3"
      >
        <i class="el-icon-check"></i>
        <h4>修改成功</h4>
      </div>

      <el-form-item style="width:100%;">
        <!-- 找回密码 -->
        <el-button
          v-if="active == 1"
          :loading="loading"
          size="medium"
          type="primary"
          style="width:100%;"
          @click="stepOne"
        >
          找回密码
        </el-button>
        <!-- 修改密码 -->
        <el-button
          v-else-if="active == 2"
          :loading="loading"
          size="medium"
          type="primary"
          style="width:100%;"
          @click="stepTwo"
        >
          修改密码
        </el-button>
        <!-- 返回登录 -->
        <el-button
          v-else
          :loading="loading"
          size="medium"
          type="primary"
          style="width:100%;"
          @click="stepThree"
        >
          返回登录
        </el-button>
      </el-form-item>

      <el-form-item
        style="width:100%;"
        v-if="active != 3"
      >
        <div class="ui-flex">
          <div class="ui-flex-1"></div>
          <el-button
            size="medium"
            type="text"
            @click="login"
          >
            返回登录
          </el-button>
        </div>
      </el-form-item>
    </el-form>
    <!--  底部  -->
    <footer />
  </div>
</template>

<script>
import Footer from "./footer.vue";
import { encrypt } from "@/utils/rsaEncrypt";
import { register, sendMail, forgetPwd } from "@http/login.js";
export default {
  name: "Login",
  components: { Footer },
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.loginForm.checkPass !== "") {
          this.$refs.loginForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.loginForm.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      active: 1,
      codeUrl: "",
      cookiePass: "",
      loginForm: {
        email: "",
        password: "",
        checkPass: "",
        code: "",
        emailCode: "",
      },
      loginRules: {
        email: [
          { required: true, message: "请输入邮箱地址", trigger: "blur" },
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"],
          },
        ],
        password: [{ validator: validatePass, trigger: "blur" }],
        checkPass: [{ validator: validatePass2, trigger: "blur" }],
        code: [{ required: true, trigger: "blur", message: "验证码不能为空" }],
        emailCode: [
          { required: true, trigger: "blur", message: "邮箱验证码不能为空" },
        ],
      },
      loading: false,
      showPassword: false,
      showCheckPass: false,
    };
  },
  created() {
    this.getCode();
  },
  methods: {
    /**
     * @Author: Songjq
     * @Date: 2021-12-16 21:37:53
     * @Fn: 获取验证码
     */
    getCode() {
      this.codeUrl = `${process.env.VUE_APP_BASE_API}api/code?${Math.random()}`;
    },

    // 下一步
    nextFn() {
      if (this.active == 1) {
        this.stepOne();
      } else {
        this.stepTwo();
      }
    },

    /**
     * @Author: Songjq
     * @Date: 2021-12-16 22:56:35
     * @Fn: 注册服务
     */
    stepOne() {
      this.$refs.loginForm.validate((valid) => {
        const user = {
          email: this.loginForm.email,
          code: this.loginForm.code,
        };
        if (valid) {
          this.loading = true;
          sendMail(user)
            .then((res) => {
              this.$notify({
                title: res.message,
                type: "success",
              });
              this.loading = false;
              this.active = 2;
              this.loginForm.code = "";
              this.getCode();
            })
            .catch(() => {
              this.loading = false;
              this.getCode();
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    stepTwo() {
      this.$refs.loginForm.validate((valid) => {
        const user = {
          email: this.loginForm.email,
          emailCode: this.loginForm.emailCode,
          password: encrypt(this.loginForm.password),
          code: this.loginForm.code,
        };
        if (valid) {
          this.loading = true;
          forgetPwd(user)
            .then((res) => {
              this.$notify({
                title: res.message,
                type: "success",
              });
              this.loading = false;
              this.active = 3;
            })
            .catch(() => {
              this.loading = false;
              this.getCode();
            });
        } else {
          return false;
        }
      });
    },

    stepThree() {
      this.$router.push({
        path: "/login",
      });
    },

    handleLogin() {
      this.$refs.loginForm.validate((valid) => {
        const user = {
          email: this.loginForm.email,
          checkPass: this.loginForm.checkPass,
          password: encrypt(this.loginForm.password),
          code: this.loginForm.code,
        };
        if (valid) {
          this.loading = true;
          register(user)
            .then(() => {
              this.loading = false;
              this.$router.push({ path: this.redirect || "/" });
            })
            .catch(() => {
              this.loading = false;
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    /**
     * @Author: Songjq
     * @Date: 2022-01-18 10:11:06
     * @Fn: 登录
     */
    login() {
      this.$router.push({ path: this.redirect || "/" });
    },
  },
};
</script>

<style rel="stylesheet/scss" scoped lang="scss">
.success-box {
  text-align: center;
  font-size: 18px;
  color: #13ce66;
  padding: 20px 0 30px 0;
  i {
    font-size: 36px;
    border: 2px solid #13ce66;
    border-radius: 50%;
    padding: 6px;
  }
  h4 {
    padding-top: 15px;
  }
}
</style>
